<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="content">
                    <div class="title">
                        <span>{{$route.query.title}}</span>
                        <i class="el-icon-close" @click="$router.go(-1)"></i>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules" class="form">
                        <el-form-item label="优惠券标题" prop="title" style="width:224px">
                            <el-input v-model="form.title" placeholder="请输入优惠券标题" :readonly="$route.query.title=='详情'"></el-input>
                        </el-form-item>
                        <el-form-item label="优惠金额" prop="face_value" style="width:224px">
                            <el-input v-model="form.face_value" placeholder="请输入优惠金额" type="number" :readonly="$route.query.title=='详情'"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" prop="start_time" style="width:224px">
                            <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :readonly="$route.query.title=='详情'" @change="ruleTime(0)"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="end_time" style="width:224px">
                            <el-date-picker v-model="form.end_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :readonly="$route.query.title=='详情'" @change="ruleTime(1)"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="用户类型" prop="user_type" style="width:224px">
                            <el-select v-model="form.user_type" style="width:100%" :readonly="$route.query.title=='详情'">
                                <el-option label="全部" value="-1"> </el-option>
                                <el-option label="普通会员" value="0"> </el-option>
                                <el-option label="金卡" value="1"> </el-option>
                                <el-option label="黑金卡" value="2"> </el-option>
                                <el-option label="二级经销商" value="3"> </el-option>
                                <el-option label="一级经销商" value="4"> </el-option>
                                <el-option label="指定用户" value="6"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="指定用户" prop="user_ids" style="width:224px" v-if="form.user_type==6">
                            <el-select multiple v-model="form.user_ids" style="width:100%" filterable :readonly="$route.query.title=='详情'">
                                <el-option v-for="item in userList" :label="item.truename" :value="item.id" :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品" prop="goods_ids" style="width:224px">
                            <el-select multiple v-model="form.goods_ids" style="width:100%" filterable :readonly="$route.query.title=='详情'">
                                <el-option v-for="item in goodList" :label="item.title" :value="item.id" :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分销劵(下级第一次购买后上级自动领取这此劵)" prop="is_distribution">
                            <el-select v-model="form.is_distribution" style="width:224px" :readonly="$route.query.title=='详情'">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div v-if="$route.query.title!='详情'">
                        <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                        <el-button style="width:143px" @click="$router.go(-1)">取消</el-button>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>

<script>
import moment from 'moment'

export default {
    data() {
        return {
            form: {
                title: '',
                face_value: '',
                start_time: '',
                end_time: '',
                user_type: '',
                user_ids: '',
                goods_ids: '',
                is_distribution: '',
                id: '',
            },
            rules: {
                title: [
                    { required: true, message: '请输入优惠券标题', trigger: 'blur' },
                ],
                face_value: [
                    { required: true, message: '请输入优惠金额', trigger: 'blur' },
                ],
                start_time: [
                    { type: 'string', required: true, message: '请选择开始时间', trigger: 'change' }
                ],
                end_time: [
                    { type: 'string', required: true, message: '请选择结束时间', trigger: 'change' }
                ],
                user_type: [
                    { required: true, message: '请选择用户类型', trigger: 'change' },
                ],
                user_ids: [
                    { required: true, message: '请选择指定用户', trigger: 'blur' },
                ],
                goods_ids: [
                    { required: true, message: '请选择产品', trigger: 'blur' },
                ],
            },
            user_typeList: ['全部', '普通会员', '金卡会员', '黑金卡会员', '二级经销商', '一级经销商', '指定用户'],
            userList: [],
            goodList: []
        }
    },
    created() {
        this.$route.meta.title = this.$route.query.title
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            this.getDetail()
        }
    },
    mounted() {
        this.roleList()
        this.getGoods()
    },
    methods: {
        ruleTime(flag) {
            if (flag == 0) {
                if (new Date(this.form.start_time).getTime() > new Date(this.form.end_time).getTime()) {
                    this.$message.warning('开始时间不能大于结束时间')
                    this.form.start_time = ''
                }
            } else {
                if (new Date(this.form.start_time).getTime() > new Date(this.form.end_time).getTime()) {
                    this.$message.warning('结束时间不能小于开始时间')
                    this.form.end_time = ''
                }
            }
        },
        //获取角色列表
        async roleList() {
            let res = await this.$Http.getUserLists({ isAll: 1 })
            if (res.status == 1) {
                this.userList = data || []
            }
        },
        //获取产品列表
        async getGoods() {
            let res = await this.$Http.getGoods({ isAll: 1 })
            if (res.status == 1) {
                this.goodList = res.data || []
            }
        },
        async getDetail() {
            let res = await this.$Http.getCoupon({ id: this.form.id })
            if (res.status == 1) {
                let data = res.data
                this.form.start_time = moment(data.start_time * 1000).format('yyyy-MM-DD')
                this.form.end_time = moment(data.end_time * 1000).format('yyyy-MM-DD')
                this.form.user_type = String(data.user_type)
                this.form.is_distribution = String(data.is_distribution)
                this.form.title = data.title
                this.form.face_value = data.face_value
                this.form.user_ids = data.user_ids.split(',')
                for (let i in this.form.user_ids) {
                    this.form.user_ids[i] = Number(this.form.user_ids[i])
                }
                this.form.goods_ids = data.goods_ids.split(',')
                for (let i in this.form.goods_ids) {
                    this.form.goods_ids[i] = Number(this.form.goods_ids[i])
                }
            }
        },
        save() {
            let form = JSON.parse(JSON.stringify(this.form))
            if (form.user_ids) {
                form.user_ids = form.user_ids.join(',')
            }
            form.goods_ids = form.goods_ids.join(',')
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setCoupon(form)
                    if (res.status == 1) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        padding: 30px;
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0 24px 20px;
        }
        .content {
            width: 517px;
            height: 100%;
            .title {
                height: 65px;
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                color: #383b40;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .el-icon-close {
                    cursor: pointer;
                }
            }
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
</style>